<template>
	<view class="page-container">
		<!-- 筛选区域 -->
		<view class="tech-card filter-section">
			<view class="card-title">
				<view class="title-icon">📚</view>
				<text>专题管理</text>
			</view>

			<view class="filter-content">
				<view class="filter-left">
					<el-button @click="addData()" class="tech-button primary-button">
						<text>➕ 添加专题</text>
					</el-button>
					<view class="drag-tip">
						<text>💡 提示：可拖拽表格行进行排序</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 数据表格区域 -->
		<view class="tech-card table-section">
			<view class="card-title">
				<view class="title-icon">📊</view>
				<text>专题列表</text>
				<text class="file-count" v-if="dataList.length > 0">共 {{ dataList.length }} 个专题</text>
			</view>

			<el-table
				ref="dragTable"
				:data="dataList"
				v-loading="loading"
				class="tech-table"
				size="small"
				:header-cell-style="{ background: '#1a1f3a', color: '#00f0ff', fontWeight: 'bold' }"
				height="calc(100vh - 280px)"
				row-key="objectId">

				<el-table-column type="index" label="#" width="80" align="center">
					<template slot-scope="scope">
						<view class="index-with-drag">
							<span class="drag-handle">⋮⋮</span>
							<span>{{ scope.$index + 1 }}</span>
						</view>
					</template>
				</el-table-column>

				<el-table-column prop="images" label="专题图片" width="100" align="center">
					<template slot-scope="scope">
						<el-image
							v-if="scope.row.images && scope.row.images.length > 0"
							class="preview-image"
							:src="scope.row.images[0]"
							:preview-src-list="scope.row.images"
							fit="cover"
						/>
						<view v-else class="no-image-text">暂无</view>
					</template>
				</el-table-column>

				<el-table-column prop="name" label="专题名称" min-width="50" show-overflow-tooltip />

				<el-table-column prop="desc" label="专题描述" min-width="150" show-overflow-tooltip>
					<template slot-scope="scope">
						<view class="text-overflow">{{ scope.row.desc || '-' }}</view>
					</template>
				</el-table-column>

				<el-table-column prop="isShow" label="精品可见" width="120" align="center">
					<template slot-scope="scope">
						<el-switch
							v-model="scope.row.isShow"
							active-color="#00f0ff"
							inactive-color="#4a5568"
							@change="toggleShow(scope.row)"
							class="table-switch"
						></el-switch>
					</template>
				</el-table-column>

				<el-table-column prop="createdAt" label="创建日期" width="160" align="center" />

				<el-table-column fixed="right" label="操作" width="230" align="center">
					<template slot-scope="scope">
						<el-button type="text" class="action-button" @click="editThis(scope.row)">
							编辑
						</el-button>
						<el-button
							v-if="scope.$index !== 0"
							type="text"
							class="action-button"
							@click="changeClass(scope.$index, scope.$index - 1)">
							上移
						</el-button>
						<el-button
							v-if="scope.$index !== dataList.length - 1"
							type="text"
							class="action-button"
							@click="changeClass(scope.$index, scope.$index + 1)">
							下移
						</el-button>
						<el-button type="text" class="action-button delete-button" @click="deleteThis(scope.row)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</view>

		<!-- 编辑/新增弹窗 -->
		<el-dialog
			:title="params.objectId ? '编辑专题' : '添加专题'"
			:visible.sync="show1"
			:width="dialogWidth"
			:close-on-click-modal="false"
			class="tech-dialog">

			<view class="dialog-content">
				<uploadImg
					:canSetHeader="true"
					@upload="(images)=>{params.images = images}"
					@remove="(images)=>{params.images = images}"
					:Images="params.images"
					title="专题图片"
					@setHeader="(images)=>{params.images = images}"
				/>

				<el-form
					label-width="90px"
					:rules="rules"
					:model="params"
					ref="thisForm"
					size="small"
					class="tech-form">

					<el-form-item label="专题名称" prop="name">
						<el-input
							v-model="params.name"
							placeholder="请填写专题名称"
							maxlength="50"
							show-word-limit
							class="tech-input"
						></el-input>
					</el-form-item>

					<el-form-item label="专题描述" prop="desc">
						<el-input
							v-model="params.desc"
							type="textarea"
							:rows="3"
							placeholder="请填写专题描述"
							maxlength="200"
							show-word-limit
							class="tech-input"
						></el-input>
					</el-form-item>

					<el-form-item label="精品可见" prop="isShow">
						<el-switch
							v-model="params.isShow"
							active-text="可见"
							inactive-text="不可见"
							class="tech-switch"
						></el-switch>
					</el-form-item>
				</el-form>
			</view>

			<span slot="footer" class="dialog-footer">
				<el-button @click="cancelDialog" class="tech-button cancel-button">取 消</el-button>
				<el-button @click="confirmAddData" :loading="saveLoading" class="tech-button primary-button">
					{{ saveLoading ? '保存中...' : '确 定' }}
				</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	import Sortable from 'sortablejs'

	let that
	export default {
		data() {
			return {
				show1: false,
				loading: false,
				saveLoading: false,
				dataList: [],
				artTypeClasses: [],
				sortable: null,
				params: {
					images: [],
					name: '',
					desc: '',
					isShow: true,
					objectId: '',
					artTypeClassId: ''
				},
				rules: {
					name: [{
						required: true,
						message: '请填写专题名称',
						trigger: 'blur'
					}],
				}
			}
		},

		computed: {
			// 响应式弹窗宽度
			dialogWidth() {
				if (typeof window !== 'undefined') {
					const width = window.innerWidth
					if (width < 768) return '90%'
					if (width < 1200) return '60%'
					return '40%'
				}
				return '40%'
			}
		},

		onLoad() {
			that = this
			that.getDataList()

			that.common.rightApi("admin/artTypeClass/list", that.params).then(res => {
				let classList = res.data
				for (let item of classList) {
					let optionItem = {
						value: item.objectId,
						label: item.name
					}
					that.artTypeClasses.push(optionItem)
				}
			})
		},

		mounted() {
			that = this
			// 等待数据加载后再初始化拖拽
			this.$nextTick(() => {
				this.initSortable()
			})
		},

		beforeDestroy() {
			// 销毁拖拽实例
			if (this.sortable) {
				this.sortable.destroy()
			}
		},

		methods: {
			// 切换精品可见状态
			toggleShow(item) {
				that.$message({
					message: '正在更新状态...',
					type: 'info',
					duration: 1000
				})

				that.common.rightApi("admin/artType/save", {
					objectId: item.objectId,
					isShow: item.isShow
				}).then(res => {
					that.$message({
						message: `已${item.isShow ? '开启' : '关闭'}精品可见`,
						type: 'success',
						duration: 1500
					})
					that.getDataList()
				}).catch(err => {
					that.$message({
						message: '状态更新失败',
						type: 'error'
					})
					// 失败时恢复原状态
					item.isShow = !item.isShow
				})
			},

			// 初始化拖拽排序
			initSortable() {
				const el = this.$refs.dragTable.$el.querySelector('.el-table__body-wrapper tbody')
				if (!el) return

				this.sortable = Sortable.create(el, {
					animation: 150,
					handle: '.el-table__row',
					ghostClass: 'sortable-ghost',
					chosenClass: 'sortable-chosen',
					dragClass: 'sortable-drag',
					onEnd: (evt) => {
						const { oldIndex, newIndex } = evt
						if (oldIndex === newIndex) return

						// 保存原始数据的 objectId
						const oldItem = this.dataList[oldIndex]
						const newItem = this.dataList[newIndex]

						// 更新本地数据顺序
						const movedItem = this.dataList.splice(oldIndex, 1)[0]
						this.dataList.splice(newIndex, 0, movedItem)

						// 调用接口保存新顺序
						this.saveDragOrder(oldItem.objectId, newItem.objectId)
					}
				})
			},

			// 保存拖拽排序
			saveDragOrder(objectId1, objectId2) {
				this.$message({
					message: '正在保存排序...',
					type: 'info',
					duration: 1000
				})

				this.common.rightApi("admin/artType/changeOrder", {
					objectId1: objectId1,
					objectId2: objectId2,
				}).then(res => {
					this.$message({
						message: '排序保存成功',
						type: 'success',
						duration: 1500
					})
					this.getDataList()
				}).catch(err => {
					this.$message({
						message: '排序保存失败',
						type: 'error'
					})
					// 失败时恢复原顺序
					this.getDataList()
				})
			},

			changeClass(index1, index2) {
				console.log(index1, index2)
				that.$message({
					message: '正在调整顺序...',
					type: 'info',
					duration: 1000
				})
				that.common.rightApi("admin/artType/changeOrder", {
					objectId1: that.dataList[index1].objectId,
					objectId2: that.dataList[index2].objectId,
				}).then(res => {
					that.$message({
						message: '顺序调整成功',
						type: 'success',
						duration: 1500
					})
					that.getDataList()
				}).catch(err => {
					that.$message({
						message: '顺序调整失败',
						type: 'error'
					})
				})
			},

			deleteThis(item) {
				that.$confirm(`确定要删除专题"${item.name}"吗？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					that.common.rightApi("admin/artType/remove", {
						objectId: item.objectId,
					}).then(res => {
						that.$message({
							message: '删除成功',
							type: 'success'
						})
						that.getDataList()
					}).catch(err => {
						that.$message({
							message: '删除失败',
							type: 'error'
						})
					})
				}).catch(() => {
					// 取消删除
				})
			},

			editThis(item) {
				that.params.name = item.name
				that.params.desc = item.desc || ''
				that.params.isShow = item.isShow
				that.params.objectId = item.objectId
				that.params.images = item.images || []
				that.params.artTypeClassId = item.artTypeClassId
				that.show1 = true
			},

			addData() {
				that.resetForm()
				that.show1 = true
			},

			// 重置表单
			resetForm() {
				that.params.name = ""
				that.params.desc = ""
				that.params.isShow = true
				that.params.images = []
				that.params.objectId = ""
				that.params.artTypeClassId = ""
				// 清除表单验证
				if (that.$refs.thisForm) {
					that.$refs.thisForm.clearValidate()
				}
			},

			// 取消弹窗
			cancelDialog() {
				that.show1 = false
				that.$nextTick(() => {
					that.resetForm()
				})
			},

			confirmAddData() {
				that.$refs["thisForm"].validate((valid) => {
					if (valid) {
						that.saveLoading = true
						that.common.rightApi("admin/artType/save", that.params).then(res => {
							that.$message({
								message: that.params.objectId ? '修改成功' : '添加成功',
								type: 'success'
							})
							that.show1 = false
							that.getDataList()
							that.resetForm()
						}).catch(err => {
							that.$message({
								message: '保存失败，请重试',
								type: 'error'
							})
						}).finally(() => {
							that.saveLoading = false
						})
					} else {
						that.$message({
							message: '请检查表单填写是否正确',
							type: 'warning'
						})
						return false;
					}
				});
			},

			getDataList() {
				that.loading = true
				that.common.rightApi("admin/artType/list", that.params).then(res => {
					that.dataList = res.data || []
					// 数据更新后重新初始化拖拽
					that.$nextTick(() => {
						if (that.sortable) {
							that.sortable.destroy()
						}
						that.initSortable()
					})
				}).catch(err => {
					that.$message({
						message: '获取数据失败',
						type: 'error'
					})
					that.dataList = []
				}).finally(() => {
					that.loading = false
				})
			}
		},

	}
</script>

<style scoped>
/* ==================== 全局容器 ==================== */
.page-container {
	min-height: 100vh;
	padding: 16px;
	background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1729 100%);
	font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ==================== 科技卡片 ==================== */
.tech-card {
	background: rgba(26, 31, 58, 0.6);
	backdrop-filter: blur(10px);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
	border: 1px solid rgba(0, 240, 255, 0.2);
	box-shadow:
		0 8px 32px rgba(0, 240, 255, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.1);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.tech-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 2px;
	background: linear-gradient(90deg, transparent, #00f0ff, transparent);
	animation: scan 3s infinite;
}

@keyframes scan {
	0%, 100% {
		left: -100%;
	}
	50% {
		left: 100%;
	}
}

.tech-card:hover {
	border-color: rgba(0, 240, 255, 0.4);
}

/* ==================== 卡片标题 ==================== */
.card-title {
	display: flex;
	align-items: center;
	font-size: 16px;
	font-weight: 600;
	color: #00f0ff;
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(0, 240, 255, 0.2);
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.title-icon {
	margin-right: 6px;
	font-size: 18px;
	filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.6));
}

.file-count {
	margin-left: auto;
	font-size: 12px;
	color: #7f8ea3;
	font-weight: normal;
	background: rgba(0, 240, 255, 0.1);
	padding: 2px 10px;
	border-radius: 10px;
	border: 1px solid rgba(0, 240, 255, 0.2);
}

/* ==================== 筛选区域 ==================== */
.filter-content {
	display: flex;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
}

.filter-left {
	display: flex;
	gap: 16px;
	align-items: center;
	flex: 1;
}

/* 拖拽提示 */
.drag-tip {
	display: flex;
	align-items: center;
	color: #7f8ea3;
	font-size: 12px;
	padding: 4px 12px;
	background: rgba(0, 240, 255, 0.05);
	border: 1px solid rgba(0, 240, 255, 0.2);
	border-radius: 6px;
	animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% {
		opacity: 0.7;
	}
	50% {
		opacity: 1;
	}
}

/* ==================== 科技按钮 ==================== */
.tech-button {
	padding: 8px 20px !important;
	border-radius: 6px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	letter-spacing: 0.3px;
	transition: all 0.3s ease !important;
	border: none !important;
	position: relative;
	overflow: hidden;
	height: 36px;
}

.primary-button {
	background: linear-gradient(135deg, #00f0ff 0%, #0099cc 100%) !important;
	color: #0a0e27 !important;
	box-shadow: 0 4px 15px rgba(0, 240, 255, 0.3);
}

.primary-button:hover {
	box-shadow: 0 6px 20px rgba(0, 240, 255, 0.5);
	transform: translateY(-2px);
}

.cancel-button {
	background: rgba(127, 142, 163, 0.2) !important;
	color: #b8c5d6 !important;
	border: 1px solid rgba(127, 142, 163, 0.3) !important;
}

.cancel-button:hover {
	background: rgba(127, 142, 163, 0.3) !important;
	border-color: rgba(127, 142, 163, 0.5) !important;
}

/* ==================== 表格区域 ==================== */
.table-section {
	height: calc(100vh - 200px);
	display: flex;
	flex-direction: column;
}

/* ==================== 表格样式 ==================== */
.tech-table {
	width: 100%;
	flex: 1;
}

.tech-table >>> .el-table {
	background: transparent !important;
	color: #e0e6ed;
}

.tech-table >>> .el-table::before {
	background: transparent !important;
}

.tech-table >>> .el-table th,
.tech-table >>> .el-table tr {
	background: transparent !important;
}

.tech-table >>> .el-table td,
.tech-table >>> .el-table th.is-leaf {
	border-bottom: 1px solid rgba(0, 240, 255, 0.1) !important;
}

.tech-table >>> .el-table td {
	color: #b8c5d6 !important;
	transition: all 0.3s ease;
	position: relative;
	z-index: 1;
}

.tech-table >>> .el-table__body tr {
	background: rgba(10, 14, 39, 0.3) !important;
	transition: all 0.3s ease;
	border-left: 3px solid transparent;
}

.tech-table >>> .el-table__body tr:hover {
	background: linear-gradient(90deg,
		rgba(0, 240, 255, 0.2) 0%,
		rgba(0, 240, 255, 0.15) 50%,
		rgba(0, 240, 255, 0.05) 100%) !important;
	border-left-color: #00f0ff;
}

.tech-table >>> .el-table__body tr:hover td {
	color: #e0e6ed !important;
}

.tech-table >>> .el-table__body-wrapper {
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 240, 255, 0.3) rgba(10, 14, 39, 0.5);
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar-track {
	background: rgba(10, 14, 39, 0.5);
	border-radius: 4px;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb {
	background: rgba(0, 240, 255, 0.3);
	border-radius: 4px;
	transition: background 0.3s;
}

.tech-table >>> .el-table__body-wrapper::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 240, 255, 0.5);
}

/* ==================== 文本溢出 ==================== */
.text-overflow {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==================== 状态样式 ==================== */
.status-active {
	color: #00ff88;
	font-weight: 600;
	font-size: 13px;
	text-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

.status-inactive {
	color: #ff6b6b;
	font-weight: 600;
	font-size: 13px;
	text-shadow: 0 0 8px rgba(255, 107, 107, 0.4);
}

/* ==================== 预览图片 ==================== */
.preview-image {
	width: 50px !important;
	height: 50px !important;
	border-radius: 6px;
	border: 2px solid rgba(0, 240, 255, 0.3);
	cursor: pointer;
	transition: all 0.3s ease;
	object-fit: cover;
	position: relative;
}

.preview-image:hover {
	border-color: #00f0ff;
	transform: scale(1.05);
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
}

.no-image-text {
	color: #7f8ea3;
	font-size: 12px;
}

/* ==================== 操作按钮 ==================== */
.action-button {
	color: #00f0ff !important;
	font-weight: 600 !important;
	padding: 4px 8px !important;
	transition: all 0.3s ease !important;
	position: relative;
	background: transparent !important;
	border-radius: 4px;
	font-size: 13px !important;
}

.action-button:hover {
	background: rgba(0, 240, 255, 0.1) !important;
}

.delete-button:hover {
	color: #ff4757 !important;
	background: rgba(255, 71, 87, 0.1) !important;
}

/* ==================== 固定列样式 ==================== */
.tech-table >>> .el-table__fixed,
.tech-table >>> .el-table__fixed-right {
	background: rgba(10, 14, 39, 0.95) !important;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.tech-table >>> .el-table__fixed-right::before,
.tech-table >>> .el-table__fixed::before {
	background: transparent !important;
}

/* ==================== 弹窗样式 ==================== */
.tech-dialog >>> .el-dialog {
	background: rgba(26, 31, 58, 0.95) !important;
	backdrop-filter: blur(20px);
	border: 1px solid rgba(0, 240, 255, 0.3);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.tech-dialog >>> .el-dialog__header {
	background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, rgba(0, 153, 204, 0.2) 100%);
	border-bottom: 1px solid rgba(0, 240, 255, 0.2);
	padding: 20px;
}

.tech-dialog >>> .el-dialog__title {
	color: #00f0ff !important;
	font-size: 18px;
	font-weight: 600;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.5);
}

.tech-dialog >>> .el-dialog__headerbtn {
	top: 20px;
}

.tech-dialog >>> .el-dialog__close {
	color: #00f0ff !important;
	font-size: 20px;
}

.tech-dialog >>> .el-dialog__close:hover {
	color: #ffffff !important;
}

.tech-dialog >>> .el-dialog__body {
	padding: 24px;
	max-height: 70vh;
	overflow-y: auto;
	background: transparent;
}

.tech-dialog >>> .el-dialog__footer {
	padding: 16px 24px;
	border-top: 1px solid rgba(0, 240, 255, 0.2);
	background: transparent;
}

.dialog-content {
	color: #e0e6ed;
}

.tech-form {
	margin-top: 24px;
}

.tech-form >>> .el-form-item__label {
	color: #b8c5d6 !important;
}

.tech-form >>> .el-input__inner,
.tech-form >>> .el-textarea__inner {
	background: rgba(10, 14, 39, 0.6) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	color: #e0e6ed !important;
	border-radius: 6px;
	transition: all 0.3s ease;
}

.tech-form >>> .el-input__inner:hover,
.tech-form >>> .el-textarea__inner:hover {
	border-color: rgba(0, 240, 255, 0.5) !important;
}

.tech-form >>> .el-input__inner:focus,
.tech-form >>> .el-textarea__inner:focus {
	border-color: #00f0ff !important;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.4);
	background: rgba(10, 14, 39, 0.8) !important;
}

.tech-form >>> .el-input__inner::placeholder,
.tech-form >>> .el-textarea__inner::placeholder {
	color: #4a5568 !important;
}

.tech-form >>> .el-input__count {
	background: transparent;
	color: #7f8ea3;
}

/* ==================== 科技开关 ==================== */
.tech-switch >>> .el-switch__core {
	background: rgba(10, 14, 39, 0.6) !important;
	border: 1px solid rgba(0, 240, 255, 0.3) !important;
	height: 22px;
	transition: all 0.3s ease;
}

.tech-switch >>> .el-switch__core::after {
	background: #7f8ea3;
	width: 16px;
	height: 16px;
	top: 2px;
}

.tech-switch.is-checked >>> .el-switch__core {
	background: linear-gradient(135deg, #00f0ff 0%, #0099cc 100%) !important;
	border-color: #00f0ff !important;
	box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
}

.tech-switch.is-checked >>> .el-switch__core::after {
	background: #0a0e27;
}

.tech-switch >>> .el-switch__label {
	color: #b8c5d6;
	font-size: 13px;
}

.tech-switch >>> .el-switch__label.is-active {
	color: #00f0ff;
}

/* ==================== 表格内开关 ==================== */
.table-switch >>> .el-switch__core {
	background: rgba(74, 85, 104, 0.4) !important;
	border: 1px solid rgba(74, 85, 104, 0.6) !important;
	height: 20px;
	width: 40px;
	transition: all 0.3s ease;
}

.table-switch >>> .el-switch__core::after {
	background: #ffffff;
	width: 14px;
	height: 14px;
	top: 2px;
	left: 2px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.table-switch.is-checked >>> .el-switch__core {
	background: linear-gradient(135deg, #00f0ff 0%, #0099cc 100%) !important;
	border-color: #00f0ff !important;
	box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
}

.table-switch.is-checked >>> .el-switch__core::after {
	background: #0a0e27;
	left: calc(100% - 16px);
}

.table-switch:hover >>> .el-switch__core {
	border-color: rgba(0, 240, 255, 0.8) !important;
}

.dialog-footer {
	display: flex;
	justify-content: flex-end;
	gap: 12px;
}

/* ==================== Loading 样式 ==================== */
.tech-table >>> .el-loading-mask {
	background-color: rgba(10, 14, 39, 0.8) !important;
}

.tech-table >>> .el-loading-spinner .circular {
	stroke: #00f0ff !important;
}

.tech-table >>> .el-loading-spinner .el-loading-text {
	color: #00f0ff !important;
}

/* ==================== 拖拽排序样式 ==================== */
.tech-table >>> .el-table__row {
	cursor: move;
	user-select: none;
}

/* 序号列拖拽样式 */
.index-with-drag {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.drag-handle {
	color: rgba(0, 240, 255, 0.3);
	font-size: 14px;
	font-weight: bold;
	letter-spacing: -2px;
	transition: all 0.3s ease;
	cursor: move;
}

.tech-table >>> .el-table__row:hover .drag-handle {
	color: rgba(0, 240, 255, 0.8);
	text-shadow: 0 0 8px rgba(0, 240, 255, 0.6);
}

/* 拖拽时的幽灵元素样式 */
.tech-table >>> .sortable-ghost {
	opacity: 0.5;
	background: rgba(0, 240, 255, 0.2) !important;
	border-left: 3px solid #00f0ff !important;
}

/* 选中拖拽元素的样式 */
.tech-table >>> .sortable-chosen {
	background: rgba(0, 240, 255, 0.15) !important;
	border-left: 3px solid #00f0ff !important;
	box-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
}

/* 正在拖拽的元素样式 */
.tech-table >>> .sortable-drag {
	background: rgba(0, 240, 255, 0.3) !important;
	border-left: 3px solid #00f0ff !important;
	box-shadow: 0 8px 32px rgba(0, 240, 255, 0.6);
	transform: rotate(2deg);
	opacity: 0.8;
}

/* ==================== 响应式 ==================== */
@media (max-width: 768px) {
	.page-container {
		padding: 12px;
	}

	.tech-card {
		padding: 12px;
		margin-bottom: 12px;
	}

	.filter-content {
		flex-direction: column;
	}
}
</style>
